<template>
  <div>
    <Dialog :visible="visible" :title="rowsData.guestGroupName + ' - ' +  $t('绑定经理')" width="70%" :footer="false" @close="close">
      <el-form label-width="80px" :model="bindStaffPage" ref="bindStaffSearch">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item :label="$t('员工姓名')" prop="adminName">
              <el-input v-model="bindStaffPage.adminName"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('账号')" prop="accountNumber">
              <el-input v-model="bindStaffPage.accountNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-button type="primary" @click="getBindStaffList">{{ $t('查询') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div style="margin: 10px 0;text-align: right">
        <el-button type="primary" @click="addStaff" v-show="$permiss[542]">{{ $t('新增') }}</el-button>
      </div>
      <Table :table-data="bindStaffTableData" :table-column="bindTableColumn" :page="bindStaffPage"
             @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
      >
        <template slot="operate">
          <el-table-column :label="$t('操作')" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="delList(scope.row)" v-show="$permiss[541]">{{ $t('解绑') }}</el-button>
            </template>
          </el-table-column>
        </template>
      </Table>
      <Dialog :visible.sync="staffVisible" :appendBody="true" :footer="$permiss[543] ? true : false" width="50%"
              :title="$t('新增')"
              @cancel="staffVisible = false" @confirm="submitStaff" @close="clearForm()">
        <el-form label-width="80px" :model="staffPage" ref="staffSearch">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item :label="$t('员工姓名')" prop="adminName">
                <el-input v-model="staffPage.adminName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('账号')" prop="accountNumber">
                <el-input v-model="staffPage.accountNumber"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="text-align: right">
              <el-button type="primary" @click="getStaffList">{{ $t('查询') }}</el-button>
            </el-col>
          </el-row>
        </el-form>
        <Table row-key="adminUserId" :selection="true" :page="false" :table-data="staffTableData"
               :table-column="staffTableColumn" :selectRows="selectRows"
               @handleSelectionChange="handleSelectionChange"></Table>
      </Dialog>
    </Dialog>
  </div>
</template>

<script>
import {guestGroupBindList,systemUserList,bindAdminGuest,cancelBindAdminGuest} from '@/api/postLoan'
export default {
  props: {
    visible: {
      default: false
    },
    rowsData: {},
  },
  data() {
    return {
      bindStaffPage: {
        pageNum: 1,
        pageSize: 10,
      },
      bindStaffTableData: [],
      bindTableColumn: [
        {label: this.$t('姓名'), prop: 'adminName', align: 'center'},
        {label: this.$t('账号'), prop: 'accountNumber', align: 'center'},
        {label: this.$t('操作时间'), prop: 'createTime', align: 'center'},
        {label: this.$t('操作人'), prop: 'createUserName', align: 'center'},
      ],
      staffVisible: false,
      staffPage: {},
      staffTableData: [],
      staffTableColumn: [
        {label: this.$t('姓名'), prop: 'adminName', align: 'center'},
        {label: this.$t('账号'), prop: 'accountNumber', align: 'center'},
      ],
      selectRows: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.getBindStaffList()
      }
    }
  },
  methods: {
    // 获取已绑定经理列表
    async getBindStaffList() {
      const {guestGroupId, type} = this.rowsData
      const res = await guestGroupBindList({...this.bindStaffPage, guestGroupId, type, adminRole: 6})
      if (res.code === 1) {
        const {list, pageSize, pageNum, total} = res.data
        this.bindStaffTableData = list
        this.bindStaffPage = Object.assign({}, this.bindStaffPage, {
          pageNum: pageNum,
          pageSize: pageSize,
          total: total
        })
      }
    },
    // 获取未绑定经理列表
    async getStaffList() {
      const {guestGroupId, type} = this.rowsData
      const res = await systemUserList({
        ...this.staffPage,
        guestGroupId,
        type: type,
        adminRole: 6
      })
      if (res.code === 1) {
        this.staffTableData = res.data
      }
    },
    // 新增员工提交
    async submitStaff() {
      if (this.selectRows.length === 0) return this.$message.error(this.$t('请选择员工'))
      const selectRows = this.selectRows.map(item => item.adminUserId)
      const res = await bindAdminGuest({
        guestGroupId: this.rowsData.guestGroupId,
        adminUserIds: selectRows,
        apiType: 1
      })
      if (res.code === 1) {
        this.$message.success(this.$t('绑定成功'))
        this.selectRows = []
        this.getBindStaffList()
        this.staffVisible = false
        this.$emit('confirmStaff')
      }
    },
    handleCurrentChange(val) {
      this.bindStaffPage.pageNum = val
      this.getBindStaffList()
    },
    handleSizeChange(val) {
      this.bindStaffPage.pageSize = val
      this.getBindStaffList()
    },
    handleSelectionChange(value) {
      this.selectRows = value
    },
    clearForm() {
      this.selectRows = []
      this.$refs.staffSearch.resetFields()
    },
    delList(row) {
      this.$confirm(this.$t('解绑后,该员工将不再负责该客群的工作'), this.$t('提示'), {
        type: 'warning'
      }).then(async () => {
        const res = await cancelBindAdminGuest({
          adminUserIds: [row.adminUserId],
          guestGroupId: this.rowsData.guestGroupId,
          apiType: 1
        })
        if (res.code === 1) {
          this.$message({
            type: 'success',
            message: this.$t('删除成功')
          });
          this.$emit('confirmStaff')
          this.getBindStaffList()
        }
      });
    },
    addStaff() {
      this.staffVisible = true
      this.getStaffList()
    },
    close() {
      this.bindStaffTableData = []
      this.$refs.bindStaffSearch.resetFields()
      this.$emit('update:visible', false)
    },

  },
  beforeDestroy() {
    this.$emit('update:visible', false)
  }
}
</script>

<style scoped>

</style>
